<template>
  <div class="login-container">
    <!-- 科技背景效果 -->
    <div class="tech-background">
      <div class="particles"></div>
      <div class="grid-lines"></div>
      <div class="scanning-line"></div>
      <div class="data-stream"></div>
    </div>
    
    <div class="login-box">
      <div class="login-header">
        <div class="hospital-logo">
          <div class="logo-icon">🏥</div>
          <div class="logo-text">
            <h1 class="typing-text">智慧康宁医院</h1>
            <span class="subtitle glowing-text">AI智能管理系统</span>
          </div>
        </div>
        <h2 class="system-title">
          <span class="bracket">[</span>
          系统登录
          <span class="bracket">]</span>
        </h2>
        <p class="welcome-text">
          <span class="status-indicator"></span>
          正在连接到智能医疗网络...
        </p>
      </div>
      <el-card class="login-card" shadow="never">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-position="top"
          label-width="auto"
          status-icon
        >
          <el-form-item label="用户名" prop="username">
            <div class="input-wrapper">
              <el-input 
                v-model="ruleForm.username" 
                prefix-icon="el-icon-user"
                placeholder="请输入用户名"
                class="tech-input"
              />
              <div class="input-glow"></div>
            </div>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <div class="input-wrapper">
              <el-input 
                v-model="ruleForm.password" 
                show-password
                prefix-icon="el-icon-lock"
                placeholder="请输入密码"
                class="tech-input"
              />
              <div class="input-glow"></div>
            </div>
          </el-form-item>

          <el-form-item label="验证码" prop="yanzen">
            <div class="captcha-container">
              <div class="input-wrapper">
                <el-input 
                  v-model="ruleForm.yanzen" 
                  placeholder="请输入验证码"
                  class="tech-input"
                />
                <div class="input-glow"></div>
              </div>
              <div 
                class="captcha tech-captcha" 
                @click="refreshCaptcha" 
                title="点击刷新验证码"
              >
                <div class="captcha-scanner"></div>
                <div v-html="captchaText" class="captcha-content"></div>
              </div>
            </div>
          </el-form-item>

          <el-form-item>
            <el-checkbox v-model="ruleForm.rememberMe">记住密码</el-checkbox>
          </el-form-item>

          <el-form-item>
            <div class="button-group">
              <el-button 
                type="primary" 
                class="login-button tech-button" 
                @click="submitForm(ruleFormRef)"
                :loading="isLoading"
              >
                <span v-if="!isLoading" class="button-text">
                  <span class="button-icon">🔐</span>
                  启动登录
                </span>
                <span v-else class="loading-text">
                  正在验证身份...
                </span>
              </el-button>
              <el-button 
                class="reset-button tech-button-secondary" 
                @click="resetForm(ruleFormRef)"
              >
                <span class="button-icon">🔄</span>
                重置数据
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios'
import { useRouter } from 'vue-router'
import{useCounterStore} from '../stores/counter'

import{login} from'@/HTTPS/server'



const stor=useCounterStore();
const router=useRouter();
const ruleFormRef = ref<FormInstance>()
const isLoading = ref(false)
const ruleForm = reactive({
 username:"",
 password:"",
 yanzen:"",
 yanzenm:"",
 rememberMe: false,
})

// 验证码相关
const captchaText = ref('');

// 检查是否有已保存的登录信息
const checkSavedCredentials = () => {
  const savedCredentials = stor.getSavedCredentials();
  if (savedCredentials) {
    ruleForm.username = savedCredentials.username;
    ruleForm.password = savedCredentials.password;
    ruleForm.rememberMe = true;
  }
}

// 生成随机验证码
const generateCaptcha = () => {
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  const captchaLength = 4;
  let result = '';
  
  // 随机生成验证码
  for (let i = 0; i < captchaLength; i++) {
    result += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  
  // 存储验证码值（不区分大小写）
  ruleForm.yanzenm = result.toLowerCase();
  
  // 设置验证码显示样式
  const coloredText = Array.from(result).map(char => {
    const color = `rgb(${Math.floor(Math.random() * 150)}, ${Math.floor(Math.random() * 150)}, ${Math.floor(Math.random() * 150)})`;
    const rotate = Math.floor(Math.random() * 30) - 15;
    return `<span style="color: ${color}; display: inline-block; transform: rotate(${rotate}deg);">${char}</span>`;
  }).join('');
  
  captchaText.value = coloredText;
}

// 刷新验证码
const refreshCaptcha = () => {
  generateCaptcha();
}

// 组件挂载时生成验证码
onMounted(() => {
  generateCaptcha();
  checkSavedCredentials();
});

const rules = reactive<FormRules>({
  username: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
   /*  { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }, */
  ],
   password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
   /*  { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }, */
  ],
  yanzen: [
    { required: true, message: '验证码不能为空', trigger: 'blur' },
    { 
      validator: (rule, value, callback) => {
        if (value.toLowerCase() !== ruleForm.yanzenm.toLowerCase()) {
          callback(new Error('验证码不正确'));
        } else {
          callback();
        }
      }, 
      trigger: 'blur' 
    }
  ]
})

const readBasicUrl=import.meta.env.VITE_ReadAPP_API_URL;
const writeBasicUrl=import.meta.env.VITE_WriteAPP_API_URL;

console.log(readBasicUrl);
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      isLoading.value = true
      login(ruleForm).then(async res=>{
        if(res.data.code==200){
          ElMessage.success(res.data.message);
          stor.use.name=res.data.data.name
          stor.use.username=res.data.data.username
          stor.use.roleId=res.data.data.roleId
          stor.use.userId=res.data.data.userId
          stor.use.roleName=res.data.data.roleName
          
          // 保存登录凭据（如果选择记住密码）
          if (ruleForm.rememberMe) {
            stor.saveCredentials({
              username: ruleForm.username,
              password: ruleForm.password
            });
          } else {
            stor.clearSavedCredentials();
          }
          
          // 加载用户菜单
          await stor.loadUserMenus();
          
           // 登录判定
        // 登录成功，写JWT的 token到本地
        window.localStorage.setItem("token", res.data.token);
        // 数据提交后端要加入新的Token值
        axios.defaults.headers.common["Authorization"] =
            "Bearer " + res.data.token;

          router.push({
            name:"Main"
          })
        }else{
          ElMessage.error(res.data.message);
          return;
        }
      }).finally(() => {
        isLoading.value = false
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  generateCaptcha(); // 重置表单时刷新验证码
}

</script>
<style>
.login-container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #0e4b99 100%);
  position: relative;
  overflow: hidden;
}

/* 科技背景效果 */
.tech-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 粒子效果 */
.particles {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #00ffff, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(0, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #00ffff, transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(0, 255, 255, 0.6), transparent),
    radial-gradient(2px 2px at 160px 30px, #00ffff, transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: particleFloat 20s linear infinite;
}

@keyframes particleFloat {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-200px, -100px); }
}

/* 网格线条 */
.grid-lines {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridMove 15s linear infinite;
}

@keyframes gridMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50px, 50px); }
}

/* 扫描线 */
.scanning-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00ffff, transparent);
  animation: scanVertical 3s ease-in-out infinite;
  box-shadow: 0 0 10px #00ffff;
}

@keyframes scanVertical {
  0% { top: -2px; opacity: 0; }
  50% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* 数据流 */
.data-stream {
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 98px,
    rgba(0, 255, 255, 0.03) 100px
  );
  animation: dataFlow 8s linear infinite;
}

@keyframes dataFlow {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

/* 登录框样式 */
.login-box {
  width: 480px;
  padding: 40px;
  background: rgba(10, 15, 30, 0.95);
  border-radius: 20px;
  box-shadow: 
    0 0 50px rgba(0, 255, 255, 0.3),
    0 0 100px rgba(0, 255, 255, 0.1),
    inset 0 1px 0 rgba(0, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(0, 255, 255, 0.3);
  animation: hologramAppear 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: center;
  position: relative;
  z-index: 10;
}

.login-box::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #00ffff, #0080ff, #00ffff, #0080ff);
  border-radius: 22px;
  z-index: -1;
  animation: borderPulse 2s linear infinite;
}

.login-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 255, 0.05) 2px,
    rgba(0, 255, 255, 0.05) 4px
  );
  border-radius: 20px;
  pointer-events: none;
}

@keyframes hologramAppear {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(50px) rotateX(10deg);
    filter: blur(10px);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05) translateY(-10px) rotateX(-2deg);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotateX(0deg);
    filter: blur(0);
  }
}

@keyframes borderPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* 头部样式 */
.login-header {
  text-align: center;
  margin-bottom: 40px;
  color: #00ffff;
  position: relative;
}

.hospital-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  gap: 20px;
}

.logo-icon {
  font-size: 52px;
  filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.8));
  animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% { 
    transform: scale(1) rotate(0deg); 
    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.8));
  }
  50% { 
    transform: scale(1.1) rotate(2deg); 
    filter: drop-shadow(0 0 30px rgba(0, 255, 255, 1));
  }
}

.typing-text {
  font-size: 32px;
  font-weight: 700;
  color: #00ffff;
  margin: 0;
  text-shadow: 
    0 0 10px rgba(0, 255, 255, 0.8),
    0 0 20px rgba(0, 255, 255, 0.5),
    0 0 30px rgba(0, 255, 255, 0.3);
  animation: textGlow 2s ease-in-out infinite alternate;
}

@keyframes textGlow {
  from {
    text-shadow: 
      0 0 10px rgba(0, 255, 255, 0.8),
      0 0 20px rgba(0, 255, 255, 0.5),
      0 0 30px rgba(0, 255, 255, 0.3);
  }
  to {
    text-shadow: 
      0 0 15px rgba(0, 255, 255, 1),
      0 0 25px rgba(0, 255, 255, 0.8),
      0 0 35px rgba(0, 255, 255, 0.6);
  }
}

.glowing-text {
  font-size: 18px;
  color: #80e0ff;
  font-weight: 500;
  display: block;
  margin-top: 8px;
  text-shadow: 0 0 10px rgba(128, 224, 255, 0.6);
  animation: subtitlePulse 3s ease-in-out infinite;
}

@keyframes subtitlePulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

.system-title {
  font-size: 26px;
  margin-bottom: 16px;
  font-weight: 600;
  color: #00ffff;
  text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
  font-family: 'Courier New', monospace;
}

.bracket {
  color: #0080ff;
  font-weight: 700;
  animation: bracketBlink 2s infinite;
}

@keyframes bracketBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

.welcome-text {
  font-size: 16px;
  color: #80e0ff;
  margin-bottom: 0;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Courier New', monospace;
}

.status-indicator {
  width: 8px;
  height: 8px;
  background: #00ff00;
  border-radius: 50%;
  animation: statusBlink 1s infinite;
  box-shadow: 0 0 10px #00ff00;
}

@keyframes statusBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

/* 表单样式 */
.login-card {
  background: transparent;
  border: none;
}

.el-card {
  background-color: transparent !important;
  border: none !important;
}

.el-form-item {
  margin-bottom: 28px;
  position: relative;
}

.el-form-item__label {
  font-weight: 600;
  color: #00ffff !important;
  font-size: 15px;
  margin-bottom: 12px;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
  font-family: 'Courier New', monospace;
}

/* 输入框包装器 */
.input-wrapper {
  position: relative;
}

.input-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  background: linear-gradient(45deg, transparent, rgba(0, 255, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.tech-input .el-input__wrapper {
  border-radius: 10px;
  border: 2px solid rgba(0, 255, 255, 0.3);
  background: rgba(10, 20, 40, 0.8);
  transition: all 0.3s ease;
  box-shadow: 
    0 0 20px rgba(0, 255, 255, 0.1),
    inset 0 1px 0 rgba(0, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.tech-input .el-input__wrapper:hover {
  border-color: rgba(0, 255, 255, 0.6);
  box-shadow: 
    0 0 30px rgba(0, 255, 255, 0.2),
    inset 0 1px 0 rgba(0, 255, 255, 0.2);
}

.tech-input .el-input__wrapper:hover + .input-glow {
  opacity: 1;
}

.tech-input .el-input__wrapper.is-focus {
  border-color: #00ffff;
  box-shadow: 
    0 0 40px rgba(0, 255, 255, 0.4),
    0 0 0 3px rgba(0, 255, 255, 0.1),
    inset 0 1px 0 rgba(0, 255, 255, 0.3);
}

.tech-input .el-input__wrapper.is-focus + .input-glow {
  opacity: 1;
  animation: inputPulse 2s infinite;
}

@keyframes inputPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

.tech-input .el-input__inner {
  color: #00ffff;
  font-weight: 500;
  font-family: 'Courier New', monospace;
  background: transparent;
}

.tech-input .el-input__inner::placeholder {
  color: rgba(0, 255, 255, 0.5);
  font-style: italic;
}

/* 验证码容器 */
.captcha-container {
  display: flex;
  align-items: center;
  gap: 15px;
}

.captcha-container .input-wrapper {
  flex: 1;
}

/* 科技验证码 */
.tech-captcha {
  font-family: 'Courier New', monospace;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 3px;
  cursor: pointer;
  background: rgba(10, 20, 40, 0.9);
  padding: 12px 20px;
  border-radius: 10px;
  min-width: 120px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  position: relative;
  border: 2px solid rgba(0, 255, 255, 0.4);
  box-shadow: 
    0 0 20px rgba(0, 255, 255, 0.2),
    inset 0 1px 0 rgba(0, 255, 255, 0.2);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.tech-captcha:hover {
  border-color: rgba(0, 255, 255, 0.8);
  box-shadow: 
    0 0 30px rgba(0, 255, 255, 0.4),
    inset 0 1px 0 rgba(0, 255, 255, 0.4);
  transform: translateY(-2px);
}

.tech-captcha::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 255, 0.1) 2px,
    rgba(0, 255, 255, 0.1) 4px
  );
  border-radius: 8px;
}

.captcha-scanner {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.3), transparent);
  animation: scanCaptcha 2s linear infinite;
  z-index: 1;
}

.captcha-content {
  position: relative;
  z-index: 2;
}

@keyframes scanCaptcha {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 按钮组 */
.button-group {
  display: flex;
  gap: 20px;
  margin-top: 24px;
}

/* 科技登录按钮 */
.tech-button {
  flex: 1;
  height: 50px;
  background: linear-gradient(135deg, #0066cc 0%, #0080ff 50%, #00aaff 100%);
  border: 2px solid rgba(0, 255, 255, 0.5);
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 16px;
  border-radius: 12px;
  color: #ffffff;
  box-shadow: 
    0 0 30px rgba(0, 128, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.tech-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s;
}

.tech-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.1) 2px,
    rgba(255, 255, 255, 0.1) 4px
  );
  opacity: 0;
  transition: opacity 0.3s;
}

.tech-button:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 0 50px rgba(0, 128, 255, 0.6),
    0 10px 30px rgba(0, 128, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, #0080ff 0%, #00aaff 50%, #00ccff 100%);
  border-color: rgba(0, 255, 255, 0.8);
}

.tech-button:hover::before {
  left: 100%;
}

.tech-button:hover::after {
  opacity: 1;
}

.tech-button:active {
  transform: translateY(-1px);
  box-shadow: 
    0 0 40px rgba(0, 128, 255, 0.5),
    0 5px 15px rgba(0, 128, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button-text, .loading-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.button-icon {
  font-size: 18px;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}

/* 科技重置按钮 */
.tech-button-secondary {
  flex: 1;
  height: 50px;
  border: 2px solid rgba(0, 255, 255, 0.4);
  color: #00ffff;
  background: rgba(10, 20, 40, 0.8);
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 16px;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 0 20px rgba(0, 255, 255, 0.2),
    inset 0 1px 0 rgba(0, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
  backdrop-filter: blur(10px);
}

.tech-button-secondary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 255, 0.1) 2px,
    rgba(0, 255, 255, 0.1) 4px
  );
  opacity: 0;
  transition: opacity 0.3s;
}

.tech-button-secondary:hover {
  background: rgba(0, 255, 255, 0.1);
  border-color: rgba(0, 255, 255, 0.8);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 
    0 0 40px rgba(0, 255, 255, 0.4),
    0 8px 20px rgba(0, 255, 255, 0.2),
    inset 0 1px 0 rgba(0, 255, 255, 0.2);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
}

.tech-button-secondary:hover::before {
  opacity: 1;
}

/* 输入框高度 */
.el-input__inner {
  height: 44px;
}

/* 科技复选框样式 */
.el-checkbox {
  color: #00ffff;
  font-weight: 500;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}

.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #0080ff;
  border-color: #00ffff;
  box-shadow: 0 0 10px rgba(0, 128, 255, 0.6);
}

.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #00ffff;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
}

.el-checkbox__inner {
  border-color: rgba(0, 255, 255, 0.5);
  background: rgba(10, 20, 40, 0.8);
  backdrop-filter: blur(5px);
}

.el-checkbox__inner:hover {
  border-color: #00ffff;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}

/* 表单验证错误样式 */
.el-form-item.is-error .el-input__wrapper {
  border-color: #ff4444;
  box-shadow: 0 0 20px rgba(255, 68, 68, 0.3);
}

.el-form-item__error {
  color: #ff6666;
  font-size: 13px;
  font-weight: 500;
  text-shadow: 0 0 5px rgba(255, 102, 102, 0.6);
  font-family: 'Courier New', monospace;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-box {
    width: 90%;
    padding: 30px;
    margin: 20px;
  }
  
  .hospital-logo {
    flex-direction: column;
    gap: 15px;
  }
  
  .logo-icon {
    font-size: 44px;
  }
  
  .typing-text {
    font-size: 28px;
  }
  
  .system-title {
    font-size: 22px;
  }
  
  .tech-background {
    opacity: 0.7;
  }
}

@media (max-width: 576px) {
  .login-box {
    width: 95%;
    padding: 25px;
  }
  
  .button-group {
    flex-direction: column;
    gap: 15px;
  }
  
  .captcha-container {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  
  .tech-captcha {
    width: 100%;
    min-width: auto;
  }
  
  .tech-background {
    opacity: 0.5;
  }
  
  .particles {
    animation-duration: 30s;
  }
}

/* 加载动画 */
.loading-text {
  animation: loadingPulse 1.5s infinite;
}

@keyframes loadingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
</style>

